"use client";

import { useState, useEffect } from "react";
import { X, AlertCircle, ExternalLink } from "lucide-react";
import Link from "next/link";

interface DemoNoticeProps {
  onClose: () => void;
}

export function DemoNotice({ onClose }: DemoNoticeProps) {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    // 添加动画效果
    const timer = setTimeout(() => setIsVisible(true), 100);
    return () => clearTimeout(timer);
  }, []);

  return (
    <div className="fixed inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center p-4">
      <div
        className={`bg-card rounded-xl shadow-lg max-w-lg w-full transform transition-all duration-300 ${
          isVisible ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0"
        }`}
      >
        <div className="relative p-6">
          {/* 关闭按钮 */}
          <button
            onClick={onClose}
            className="absolute right-4 top-4 p-2 hover:bg-accent rounded-lg transition-colors"
          >
            <X className="w-4 h-4" />
          </button>

          {/* 图标和标题 */}
          <div className="flex items-center gap-3 mb-4">
            <div className="p-3 bg-primary/10 rounded-full">
              <AlertCircle className="w-6 h-6 text-primary" />
            </div>
            <h2 className="text-xl font-bold">演示版本提示</h2>
          </div>

          {/* 内容 */}
          <div className="space-y-4">
            <p className="text-muted-foreground">
              欢迎使用心身同调·全维健康平台。请注意：
            </p>
            <ul className="space-y-2 text-muted-foreground">
              <li className="flex items-start gap-2">
                <div className="w-1.5 h-1.5 rounded-full bg-primary mt-2 flex-shrink-0" />
                <span>本网站仅用于功能演示和项目展示</span>
              </li>
              <li className="flex items-start gap-2">
                <div className="w-1.5 h-1.5 rounded-full bg-primary mt-2 flex-shrink-0" />
                <span>AI 分析功能已关闭，心路笔记仅支持基础记录功能</span>
              </li>
              <li className="flex items-start gap-2">
                <div className="w-1.5 h-1.5 rounded-full bg-primary mt-2 flex-shrink-0" />
                <span>如需使用完整功能，请自行部署项目并配置相关参数</span>
              </li>
            </ul>

            {/* 操作按钮 */}
            <div className="flex justify-between items-center pt-4 mt-4 border-t">
              <Link
                href="/docs"
                className="text-sm text-primary hover:text-primary/80 transition-colors flex items-center gap-1"
              >
                <span>查看部署文档</span>
                <ExternalLink className="w-3 h-3" />
              </Link>
              <button
                onClick={onClose}
                className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
              >
                我知道了
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
} 